$width: 500px;
$smallWidth: 300px;

@media (max-width: 768px) {
  .engine-main .item {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

.search-engine {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  &.small {
    .input-wrapper {
      width: $smallWidth;
    }
  }

  .input-wrapper {
    position: relative;
    width: $width;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;

    input {
      padding-left: 10px;
      padding-right: 10px;

      &:-webkit-autofill-selected {
        background-color: transparent !important;
        box-shadow: inset 0 0 0 500px transparent !important;
      }
    }

    .left-icon {
      position: relative;
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: 20px 20px;
      cursor: pointer;
    }

    .search-icon {
      cursor: pointer;
    }
  }

  ::ng-deep .removeAddon .ant-input-group-addon {
    display: none !important;
  }
}

::ng-deep.engine-main {
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  width: $width;
  max-width: 90vw;
  .item {
    width: calc(33.33% - 10px);
    padding: 6px;
    display: flex;
    background: #f6f6f6;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.1s linear;
    box-sizing: border-box;
    border: 1px solid transparent;
    &:hover {
      background-color: #eee;
    }
    .name2 {
      margin-left: 10px;
      font-size: 15px;
      align-self: center;
    }
  }
}

@media screen and (max-width: 768px) {
  .input-wrapper {
    width: 90% !important;
  }
}
